<%@page import="util.JsonUtil"%>
<%@page import="controller.TimetableCtrl"%>
<%@ page language="java" contentType="text/html; charset=US-ASCII"
	pageEncoding="US-ASCII"%>

<%@ taglib prefix="stripes"
	uri="http://stripes.sourceforge.net/stripes-dynattr.tld"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<jsp:useBean id="DateUtil" scope="page" class="util.DateUtil" />

<stripes:layout-render name="/student/master-page.jsp">

	<stripes:layout-component name="head">
		<link
			href='${pageContext.request.contextPath}/assets/css/fullcalendar.css'
			rel='stylesheet' />
		<link
			href='${pageContext.request.contextPath}/assets/css/fullcalendar.print.css'
			rel='stylesheet' media='print' />
		<link
			href='${pageContext.request.contextPath}/assets/css/timetable.css'
			rel='stylesheet' />

	</stripes:layout-component>
	<stripes:layout-component name="content">

		<center>
			<stripes:messages />
			<stripes:errors />
		</center>

		<div class="container legend">
			<div class="row">
				<div class="col-md-12">
					<span class="label label-default">Legend:</span> <span
						class="label label-success">Successful</span> <span
						class="label label-primary">Pending</span> <span
						class="label label-warning">Bookmarked</span>
				</div>
			</div>
		</div>

		<ul class="nav nav-tabs">
			<li class="active"><a
				href="${pageContext.request.contextPath}/timetable/view">Timetable</a></li>
			<li class="passive"><a
				href="${pageContext.request.contextPath}/timetable/exam">Exams</a></li>
		</ul>

		<div id="calendar"></div>

		<c:set var="pagePath" value="/timetable/view/" />
		<c:set var="uri" value="timetable" />

		<c:forEach items="${actionBean.eventSections}" var="eachSection">
			<c:set var="biddingEligibilityStatusForSelectedCourse"
				value="${actionBean.getBiddingEligibilityStatusForCourse(eachSection.course) }" />
			<%@include file="/student/layout/timetable-section-popover.jsp"%>
		</c:forEach>

		<c:forEach items="${actionBean.eventCourses}" var="eachCourse">
			<%@include file="/student/layout/timetable-exam-popover.jsp"%>
		</c:forEach>

	</stripes:layout-component>

	<stripes:layout-component name="end">
		<script
			src="${pageContext.request.contextPath}/assets/js/jquery-ui.custom.min.js"
			type="text/javascript"></script>
		<script
			src="${pageContext.request.contextPath}/assets/js/fullcalendar.min.js"
			type="text/javascript"></script>
		<script type="text/javascript">
		
			$(document).ready(function() {
				
				$('#calendar').fullCalendar({
					header : {
						left : 'prev,next today',
						center : 'title',
						right : 'month,agendaWeek'
					},
					defaultView : 'agendaWeek',
					slotMinutes: 30,
					firstDay: 1,
					minTime: '8',
					maxTime: '19',
					allDaySlot: false,
					editable : false,
					slotEventOverlap : false,
					events : ${actionBean.eventsJson},
					eventMouseover: function( event, jsEvent, view ) { $(this).data('isMouseover',true); },
					eventMouseout: function( event, jsEvent, view ) { $(this).data('isMouseover',false); },
					eventRender: function(event, element) {
						
						var isExamEvent = event.title.indexOf('EXAM') == 0;
						if(isExamEvent) {
							$(element).addClass('exam-event');
						}
						
						var waitAndHide = function() {
							setTimeout(function(){
								if($(element).data('isPopoverShown') == true && $(element).data('shouldShowPopover') == false) {
									$(element).popover('hide');
							        $(element).data('isPopoverShown', false);
								}
							}, 100);
						};
						
						$(element).popover({
					        html: true,
					        trigger: 'manual',
					        container: 'body',
					        placement: 'auto',
					        title: event.title,
					        content: function () {
					        	return $("#"+event.id).html();
					        }
					    }).on("mouseenter", function () {
					    	$(element).data('shouldShowPopover', true);
					    	
					    	if($(element).data('isPopoverShown') == undefined || $(element).data('isPopoverShown') == false){
					        $(element).popover("show");
					        $('.edollar').tooltip();
					        $(element).data('isPopoverShown', true);
					    	}
					        
					        $('.popover').on("mouseleave", function () {
					        	$(element).data('shouldShowPopover', false);
					        	waitAndHide();
					        }).on("mouseenter",function () {
					        	$(element).data('shouldShowPopover', true);
					        });
					        
					    }).on("mouseleave", function () {
					    	$(element).data('shouldShowPopover', false);
					    	waitAndHide();
					    });
						
					}
				});

			});
		</script>

	</stripes:layout-component>

</stripes:layout-render>
